<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

    <style>
        .center {
            width: 1200px;
            margin: 0 auto;
        }

        .content-img img {
            max-width: 100%;
            height: auto;
        }

        .like-img.liked {
            /* 点赞状态的样式 */
            filter: grayscale(0%);
        }

        .like-img {
            /* 未点赞状态的样式 */
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="display: flex; flex-direction: column;">
        <my-header></my-header>
        <el-main class="center">
            <el-row gutter="20">
                <el-col span="18">
                    <el-card>
                        <h2 style="margin-bottom: 30px;">{{c.title}}</h2>
                        <div style="display: flex; align-items: center; margin-top: 20px;">
                            <el-avatar size="large" :src="c.userImgUrl" style="margin-right: 10px;"></el-avatar>
                            <div>
                                <h3 style="margin: 0; margin-bottom: 10px;">{{c.nickname}}</h3>
                                <p style="margin: 0; font-size: 10px;">{{c.createTime}} • 阅读 {{c.viewCount}}</p>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div v-if="c.type==1">
                            <div style="padding: 0 10px;">
                                <p class="content-img" v-html="c.content">文章内容</p>
                            </div>
                        </div>
                        <div v-if="c.type==2">
                            <p>{{c.videoDescribe}}</p>
                        </div>
                        <div v-if="c.type==2">
                            <video style="width: 100%" :src="c.videoUrl" controls type="video/mp4"></video>
                        </div>
                        <div style="display: flex; justify-content: center;align-items: center;">
                            <div>
                                <img :src="likeImgSrc" width="90px" height="90px" @click="like()" ref="likeImg">
                                <p style="position: relative;text-align: center;">{{ likeText }}</p>
                            </div>
                        </div>
                    </el-card>

                    <el-card>
                        <h2>评论区</h2>
                        <el-divider></el-divider>
                        <el-row gutter="20">
                            <el-col span="20">
                                <el-input type="textarea"
                                          v-model="comment.content"
                                          placeholder="写下你的评论..."></el-input>
                            </el-col>
                            <el-col span="2">
                                <el-button type="success" @click="post()">发表评论</el-button>
                            </el-col>
                        </el-row>
                        <!--评论列表开始-->
                        <template>
                            <div>
                                <el-row v-for="comment in comments" :key="comment.id" style="margin: 5px 0">
                                    <el-col span="2">
                                        <el-avatar :src="comment.userImgUrl"></el-avatar>
                                    </el-col>
                                    <el-col span="20">
                                        <span style="font-weight: bold">{{comment.nickname}}:</span>
                                        <p style="margin:5px 0; display: flex; justify-content: space-between;">
                                            <span style="flex-grow: 1;"
                                                  @click="showOptions(comment.id)">{{comment.content}}</span>
                                            <span v-if="optionsVisible === comment.id"
                                                  style="display: flex; align-items: center;">
            <span @click="showReplyBox(comment.id)" style="font-size: 12px;">回复</span>
            <span style="margin-left: 10px; font-size: 12px;" @click="deleteComment(comment.id)">删除</span>
          </span>
                                        </p>
                                        <span style="color: #666;font-size: 12px">{{comment.createTime}}</span>
                                        <div v-if="replyBoxVisible === comment.id" style="margin-left: 2rem">
                                            <el-input v-model="replycomment.content"
                                                      placeholder="请输入回复内容"></el-input>
                                            <el-button @click="submitReply(comment.id)">提交回复</el-button>
                                            <el-button v-if="replyBoxButtonsVisible" @click="hideReplyBox()">取消回复
                                            </el-button>
                                        </div>
                                        <div v-if="comment.children" style="margin-left: 2rem">
                                            <el-row v-for="childComment in comment.children" :key="childComment.id"
                                                    style="margin: 5px 0">
                                                <el-col span="2">
                                                    <el-avatar :src="childComment.userImgUrl"></el-avatar>
                                                </el-col>
                                                <el-col span="20">
                                                    <span style="font-weight: bold">{{childComment.nickname}}:</span>
                                                    <p style="margin:5px 0; display: flex; justify-content: space-between;">
                                                        <span style="flex-grow: 1;"
                                                              @click="showOptions(childComment.id)">{{childComment.content}}</span>
                                                        <span v-if="optionsVisible === childComment.id"
                                                              style="display: flex; align-items: center;">
                  <span @click="showReplyBox(childComment.id)" style="font-size: 12px;">回复</span>
                  <span style="margin-left: 10px; font-size: 12px;" @click="deleteComment(childComment.id)">删除</span>
                </span>
                                                    </p>
                                                    <span style="color: #666;font-size: 12px">{{childComment.createTime}}</span>
                                                    <div v-if="replyBoxVisible === childComment.id"
                                                         style="margin-left: 2rem">
                                                        <el-input v-model="replycomment.content"
                                                                  placeholder="请输入回复内容"></el-input>
                                                        <el-button @click="submitReply(childComment.id)">提交回复
                                                        </el-button>
                                                        <el-button @click="hideReplyBox()">取消回复</el-button>
                                                    </div>
                                                    <div v-if="childComment.children" style="margin-left: 2rem">
                                                        <el-row v-for="childComment2 in childComment.children"
                                                                :key="childComment2.id" style="margin: 5px 0">
                                                            <el-col span="2">
                                                                <el-avatar :src="childComment2.userImgUrl"></el-avatar>
                                                            </el-col>
                                                            <el-col span="20">
                                                                <span style="font-weight: bold">{{childComment2.nickname}}:</span>
                                                                <p style="margin:5px 0">{{childComment2.content}}</p>
                                                                <span style="color: #666;font-size: 12px">{{childComment2.createTime}}</span>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                        <!--评论列表结束-->
                    </el-card>
                </el-col>
                <el-col span="6">
                    <el-card class="right-card" style="height: 240px;text-align: center;">
                        <div>
                            <div style="display: flex; align-items: center;">
                                <img :src="c.userImgUrl"
                                     style="border-radius: 50%; width: 60px; height: 60px; margin-right: 20px;">
                                <h2>{{c.nickname}}</h2>
                            </div>
                            <p></p>
                            <div>
                                <div style="display: flex; justify-content: space-between;">
                                    <div style="flex: 1; text-align: center;">
                                        <p>{{countByUser.articleCountByUser}}</p>
                                        <p>文章</p>
                                    </div>
                                    <div style="flex: 1; text-align: center;">
                                        <p>{{countByUser.videoCountByUser}}</p>
                                        <p>视频</p>
                                    </div>
                                    <div style="flex: 1; text-align: center;">
                                        <p>{{countByUser.likeCountByUser}}</p>
                                        <p>获赞</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!--作者其它文章开始-->
                    <el-card style="margin:10px 0">
                        <h3>作者其它文章</h3>
                        <el-divider></el-divider>
                        <!--文章列表开始-->
                        <el-row gutter="10" v-for="c in othersArr" style="margin-top: 10px">
                            <el-col span="10">
                                <a :href="'/contentDetail.html?id='+c.id">
                                    <img :src="c.imgUrl" width="100%" height="70px">
                                </a>
                            </el-col>
                            <el-col span="14">
                                <a style="color: #333;text-decoration: none"
                                   :href="'/contentDetail.html?id='+c.id">
                                    <p class="title_p" style="margin: 0;">{{c.title}}</p>
                                </a>
                                <i class="el-icon-time" style="color: #666">{{c.createTime}}</i>
                            </el-col>
                        </el-row>
                        <!--文章列表结束-->
                    </el-card>

                    <!--作者其它文章结束-->
                    <!--热门文章开始-->
                    <el-card style="margin:10px 0">
                        <h3>热门文章</h3>
                        <el-divider></el-divider>
                        <!--文章列表开始-->
                        <el-row gutter="10" v-for="c in hotArr" style="margin-top: 10px">
                            <el-col span="10">
                                <a :href="'/contentDetail.html?id='+c.id">
                                    <img :src="c.imgUrl" width="100%" height="70px">
                                </a>
                            </el-col>
                            <el-col span="14">
                                <a style="color: #333;text-decoration: none"
                                   :href="'/contentDetail.html?id='+c.id">
                                    <p class="title_p" style="margin: 0;">{{c.title}}</p>
                                </a>
                                <i class="el-icon-time" style="color: #666">{{c.createTime}}</i>

                            </el-col>
                        </el-row>
                        <!--文章列表结束-->
                    </el-card>

                    <!--热门文章结束-->

                </el-col>
            </el-row>
        </el-main>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                c: {},
                othersArr: [],
                hotArr: [],
                comment: {content: ""},
                comments: [],
                countByUser: {},
                replycomment: {content: ""},
                optionsVisible: null, // 用于控制 "回复" 和 "删除" 选项的显示
                replyBoxVisible: null, // 当前回复框的评论ID，null表示隐藏回复框
                replyBoxButtonsVisible: false, // 是否显示提交回复和取消回复两个按钮
                liked: false,
            }
        },
        computed: {
            // 根据点赞状态计算显示的图片路径和文本内容
            likeImgSrc() {
                return this.liked ? 'imgs/liked.png' : 'imgs/unliked.png';
            },
            likeText() {
                return this.liked ? '已点赞' : '点赞';
            },
        },
        methods: {
            showReplyBox(id) {
                this.replyBoxVisible = id;
                this.replyBoxButtonsVisible = true;
            },
            hideReplyBox() {
                this.replyBoxVisible = null;
                this.replycomment = {
                    content: '',
                };
                this.replyBoxButtonsVisible = false;
            },
            showOptions(id) {
                this.optionsVisible = id;
            },
            hideOptions() {
                this.optionsVisible = null;
            },
            like() {
                let id = new URLSearchParams(location.search).get('id');
                axios.post(`/v1/contents/${id}/like`).then((response) => {
                    if (response.data.code === 1) {
                        this.liked = true;
                        this.$message.success('点赞成功!');
                    } else if (response.data.code === 1005) {
                        this.liked = false;
                        this.$message.success('取消点赞成功!');
                    } else {
                        alert('登录超时请重新登录!');
                        location.href = '/login.html';
                    }
                    // 将点赞状态保存到本地存储中，键名为liked_{articleId}
                    localStorage.setItem(`liked_${id}`, this.liked.toString());
                });
            },
            post() {
                if (v.comment.content.trim() == "") {
                    v.$message.error("请输入评论的内容!");
                    return
                }
                if (localStorage.user == null) {
                    alert("请先登录!");
                    location.href = "/login.html";
                    return;
                }
                //设置被评论的内容id
                v.comment.contentId = v.c.id;
                axios.post("/v1/comments/insert", v.comment).then(function (response) {
                    if (response.data.code == 1) {
                        v.$message.success("评论成功!")
                        location.reload();
                    } else {
                        alert("登录超时请重新登录!");
                        location.href = "/login.html"
                    }
                })
            },
            loadUserData() {
                axios.get("/v1/contents/" + v.c.createBy + "/countByUser").then(function (response) {
                    if (response.data.code == 1) {
                        v.countByUser = response.data.data;
                    }
                })
            },
            loadUserOtherContent() {
                //请求当前文章作者其它内容
                axios.get("/v1/contents/" + v.c.createBy + "/others").then(function (response) {
                    if (response.data.code == 1) {
                        v.othersArr = response.data.data;
                    }
                })
            },
            showReplyBox(commentId) {
                this.replyBoxVisible = commentId;
                this.Content = '';
            },
            submitReply(commentId) {
                v.replycomment.contentId = v.c.id;
                axios.post("/v1/comments/" + commentId + "/insertReply", v.replycomment).then(function (response) {
                    if (response.data.code == 1) {
                        v.$message.success("回复成功!")
                    } else {
                        alert("登录超时请重新登录!");
                        location.href = "/login.html"
                    }
                })
            },
            deleteComment(commentId) {
                if (confirm("您确认删除该评论吗?")) {
                    axios.post("/v1/comments/" + commentId).then(function (response) {
                        if (response.data.code == 1) {
                            v.$message.success("删除成功!")
                            location.reload();
                        } else if (response.data.code == 1005) {
                            alert("无权删除该评论");
                        }
                    })
                }
            },

        },
        created: function () {
            let id = new URLSearchParams(location.search).get("id");
            //发请求获取内容详情
            axios.get("/v1/contents/" + id + "/detail").then((response) => {
                if (response.data.code == 1) {
                    v.c = response.data.data;
                    //请求获取用户总文章数,总视频数,总获赞数
                    v.loadUserData();
                    // 获取用户其他文章
                    v.loadUserOtherContent();
                }
            })
            //发请求获取热门文章
            axios.get("/v1/contents/hot").then(function (response) {
                if (response.data.code == 1) {
                    v.hotArr = response.data.data;
                }
            })
            //发请求获取评论
            axios.get("/v1/comments/" + id + "/listComment").then(function (response) {
                if (response.data.code == 1) {
                    v.comments = response.data.data;
                }
            })
            // 在组件创建时从localStorage中读取点赞状态
            let liked = localStorage.getItem(`liked_${id}`);
            console.log(liked);
            if (liked !== null) {
                this.liked = (liked === 'true');
            }
        }
    })
</script>
</html>
